import React, { useMemo } from 'react'
import {
  Text, View, Image,
} from 'react-native'
import Modal from '@COMPONENTS/modal/Modal'
import EStyleSheet from 'react-native-extended-stylesheet'
import LinearGradientButton from '@COMPONENTS/button/LinearGradient'
import Images from '@IMAGE'
import Svg, { Circle } from 'react-native-svg'
import Button from '@COMPONENTS/button/Button'

const PERIMETER = Math.PI * 2 * 59
const TOTAL_SECOND = 5 * 60

interface ModalProps {
  onEnd?: () => void
  onContinue?: () => void
  content: React.ReactNode
  title: string
  subTitle: string
  footer: string[]
  visible: boolean
}
const ModalCom: React.FC<ModalProps> = (props) => {
  const {
    onEnd, onContinue, content, title, subTitle, footer, visible,
  } = props

  return (
    <Modal visible={visible} style={styles.mask} animationType="fade">
      <View style={styles.bodyStyle}>
        {content}
        <Text style={styles.pauseCount}>{title}</Text>
        <Text style={styles.desc}>{subTitle}</Text>
        <View style={styles.footer}>
          {footer.length > 1 ? (
            <>
              <Button onPress={onEnd}>
                <Text style={[styles.leftButton]}>{footer[0]}</Text>
              </Button>

              <LinearGradientButton style={styles.linearGradientButton} onPress={onContinue}>
                <Text style={[styles.leftButton, styles.rightButton]}>
                  {footer[1]}
                </Text>
              </LinearGradientButton>
            </>
          ) : (
            <LinearGradientButton style={[styles.linearGradientButton, styles.fullWidth]} onPress={onEnd}>
              <Text style={styles.fullWidthText}>
                {footer[0]}
              </Text>
            </LinearGradientButton>
          )}

        </View>
      </View>
    </Modal>
  )
}

interface PauseLimitProps {
  onEnd: () => void
  onContinue: () => void
  visible: boolean
}

const PauseLimitModal: React.FC<PauseLimitProps> = (props) => {
  const { onEnd, onContinue, visible } = props

  return (
    <ModalCom
      visible={visible}
      onEnd={onEnd}
      onContinue={onContinue}
      content={<Image source={Images.home.iconLimit} style={styles.image} />}
      title="抱歉，您已超过暂停次数上限"
      subTitle="每次治疗最多可暂停3次，您确定要停止治疗"
      footer={['结束治疗', '继续治疗']}
    />
  )
}

interface PauseProps {
  pauseCount: number
  onEnd: () => void
  onContinue: () => void
  visible: boolean
  totalSecond: number
}

const PauseModal: React.FC<PauseProps> = (props) => {
  const {
    onEnd, onContinue, pauseCount = 1, visible, totalSecond = TOTAL_SECOND,
  } = props

  const { m: minute, s: second, remainingSeconds } = useMemo(() => {
    if (totalSecond === 0) {
      onEnd()
    }
    return ({
      m: String(Math.floor(totalSecond / 60)).padStart(2, '0'), // 剩余分钟数
      s: String(Math.floor(totalSecond % 60)).padStart(2, '0'), // 剩余秒数
      remainingSeconds: totalSecond, // 剩余的总秒数
    })
  }, [totalSecond, onEnd])

  return (
    <ModalCom
      visible={visible}
      onEnd={onEnd}
      onContinue={onContinue}
      content={(
        <View style={styles.progress}>
          <Svg height="120" width="120">
            <Circle
              cx="60"
              cy="60"
              r="59"
              stroke="#7CD795"
              strokeWidth="2"
              fill="transparent"
            />
            <Circle
              cx="60"
              cy="60"
              r="59"
              stroke="#D0D4DB"
              strokeWidth="2"
              origin="60, 60"
              rotation={-90}
              strokeLinecap="round"
              strokeDasharray={[PERIMETER]}
              strokeDashoffset={PERIMETER * (remainingSeconds / TOTAL_SECOND)}
              fill="transparent"
            />
          </Svg>
          <View style={styles.textView}>
            <Text style={styles.time}>
              {`${minute}:${second}`}
            </Text>
            <Text style={styles.timeText}>结束倒计时</Text>
          </View>
        </View>
      )}
      title={`治疗暂停第${pauseCount}次`}
      subTitle="每次治疗最多可暂停3次，您确定要停止治疗"
      footer={['结束治疗', '继续治疗']}
    />
  )
}

interface FinishProps {
  remainingCount: number
  onEnd: () => void
  visible: boolean
}
const FinishModal: React.FC<FinishProps> = (props) => {
  const { onEnd, remainingCount, visible } = props

  return (
    <ModalCom
      visible={visible}
      onEnd={onEnd}
      onContinue={onEnd}
      content={<Image source={Images.home.iconFinish} style={styles.image} />}
      title="治疗已完成"
      subTitle={`本次治疗完成，剩余${remainingCount}个疗程`}
      footer={['我知道了']}
    />
  )
}

export { PauseLimitModal, PauseModal, FinishModal }

const styles = EStyleSheet.create({
  mask: {
    flex: 1,
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center',
  },
  bodyStyle: {
    width: 295,
    backgroundColor: '$white',
    borderRadius: 12,
    paddingHorizontal: 16,
    paddingVertical: 24,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    marginTop: 8,
    marginBottom: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
  textView: {
    marginTop: -80,
    alignItems: 'center',
  },
  time: {
    fontSize: 32,
    fontFamily: 'Avenir-Medium',
    fontWeight: '500',
    color: '#333333',
  },
  timeText: {
    fontSize: 12,
    fontFamily: 'PingFangSC-Light',
    fontWeight: '300',
    color: '#8C8C8C',
  },
  pauseCount: {
    fontSize: 18,
    fontFamily: 'PingFangSC-Medium',
    fontWeight: '500',
    color: '#333',
  },
  desc: {
    fontSize: 12,
    fontFamily: 'PingFangSC-Regular',
    fontWeight: '400',
    color: '#595959',
    marginTop: 8,
    marginBottom: 48,
  },
  footer: {
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  leftButton: {
    width: 120,
    paddingVertical: 12,
    borderRadius: 23,
    borderColor: '#D0D4DB',
    borderWidth: 1,
    backgroundColor: '$white',
    fontSize: 15,
    fontFamily: 'PingFangSC-Medium',
    fontWeight: '500',
    color: '#595959',
    textAlign: 'center',
  },
  rightButton: {
    color: '$white',
    backgroundColor: 'transparent',
    borderColor: 'transparent',
  },
  linearGradientButton: {
    width: 120,
    borderWidth: 1,
    borderRadius: 23,
  },
  fullWidth: {
    width: 263,
    borderColor: 'transparent',
  },
  fullWidthText: {
    width: '100%',
    paddingVertical: 12,
    fontSize: 15,
    fontFamily: 'PingFangSC-Medium',
    fontWeight: '500',
    color: '$white',
    textAlign: 'center',
  },
  progress: {
    marginTop: 8,
    marginBottom: 20,
    width: 120,
    height: 120,
  },
})
